<svg id="svg-root" width="100%" height="100%"
  viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges">
  <defs>
    <filter id="composite-ident" x="0" y="0" width="1" height="1">
      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="1" k3="-1" k4="0"/>
    </filter>
    <filter id="composite-negative" x="0" y="0" width="1" height="1">
      <feComposite operator="arithmetic" in="FillPaint" in2="FillPaint" k1="0" k2="2" k3="-1.5" k4="0"/>
    </filter>
    <filter id="composite-mixed" x="0" y="0" width="1" height="1">
      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="1" k2="-0.5" k3="0.2" k4="-0.1"/>
    </filter>
    <filter id="composite-clamped" x="0" y="0" width="1" height="1">
      <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="10" k3="20" k4="0"/>
    </filter>
  </defs>
    
  <g transform="translate(100 30)">
    <rect fill="lime" width="120" height="120"/>
    <rect fill="red" stroke="red" filter="url(#composite-ident)" x="10" y="10" width="100" height="100"/>
  </g>
  <g transform="translate(250 30)">
    <rect fill="#0F0" filter="url(#composite-negative)" x="10" y="10" width="100" height="100"/>
    <rect stroke="#80FF80" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
  </g>
  <g transform="translate(100 180)">
    <rect fill="rgb(43,17,12)" stroke="rgb(32,42,37)" filter="url(#composite-mixed)" x="10" y="10" width="100" height="100"/>
    <rect stroke="#666" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
  </g>
  <g transform="translate(250 180)">
    <rect fill="rgb(0,127,0)" stroke="rgb(0,0,127)" filter="url(#composite-clamped)" x="10" y="10" width="100" height="100"/>
    <rect stroke="rgb(0,255,255)" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
  </g>
</svg>
